<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>模态框</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../plugin/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../../plugin/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="../../adminlte/css/AdminLTE.min.css">
  <link rel="stylesheet" href="../../adminlte/css/skins/all-skins.min.css">
  <link rel="stylesheet" href="../../plugin/toastr/toastr.min.css">
  <link rel="stylesheet" href="../../system/css/common.css">

  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style>
    .example-modal .modal {
      position: relative;
      top: auto;
      bottom: auto;
      right: auto;
      left: auto;
      display: block;
      z-index: 1;
    }

    .example-modal .modal {
      background: transparent !important;
    }
  </style>
</head>
<body class="hold-transition gray-bg sidebar-mini">
<div class="wrapper">
  <section class="content">
    <div class="row">
      <div class="col-xs-12">
        <div class="box box-primary">
          <div class="box-header with-border">
            <h3 class="box-title">模态弹出框</h3>
          </div>
          <div class="box-body">
            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-default">
				默认样式模态框
            </button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal-info">
				信息样式模态框
            </button>
			<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-primary">
				原始样式模态框
			</button>
            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal-danger">
				错误样式模态框
            </button>
            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modal-warning">
				警告样式模态框
            </button>
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal-success">
				成功样式模态框
            </button>
          </div>
		  <div class="box-footer">
		  	访问 <a href="http://getbootstrap.com/javascript/#modals" target="_blank">模态框文档</a> 获取更多信息和样例.
		  </div>
        </div>
      </div>
    </div>

	<div class="modal fade" id="modal-default">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span></button>
				  <h4 class="modal-title">默认样式的模态框</h4>
				</div>
				<div class="modal-body">
				  <p>主体内容</p>
				</div>
				<div class="modal-footer">
				  <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
				  <button type="button" class="btn btn-primary">确认</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal modal-primary fade" id="modal-primary">
        <div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span></button>
				  <h4 class="modal-title">原始样式的模态框</h4>
				</div>
				<div class="modal-body">
				  <p>主体内容</p>
				</div>
				<div class="modal-footer">
				  <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">关闭</button>
				  <button type="button" class="btn btn-outline">确认</button>
				</div>
			</div>
        </div>
	</div>

	<div class="modal modal-info fade" id="modal-info">
        <div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span></button>
				  <h4 class="modal-title">信息样式模态框</h4>
				</div>
				<div class="modal-body">
				  <p>主体内容</p>
				</div>
				<div class="modal-footer">
				  <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">关闭</button>
				  <button type="button" class="btn btn-outline">确认</button>
				</div>
			</div>
        </div>
	</div>

	<div class="modal modal-warning fade" id="modal-warning">
        <div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span></button>
				  <h4 class="modal-title">警告样式模态框</h4>
				</div>
				<div class="modal-body">
				  <p>主体内容</p>
				</div>
				<div class="modal-footer">
				  <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">关闭</button>
				  <button type="button" class="btn btn-outline">确认</button>
				</div>
			</div>
        </div>
	</div>

	<div class="modal modal-success fade" id="modal-success">
        <div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span></button>
				  <h4 class="modal-title">成功样式模态框</h4>
				</div>
				<div class="modal-body">
				  <p>主体内容</p>
				</div>
				<div class="modal-footer">
				  <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">关闭</button>
				  <button type="button" class="btn btn-outline">确认</button>
				</div>
			</div>
        </div>
	</div>


	<div class="modal modal-danger fade" id="modal-danger">
        <div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span></button>
				  <h4 class="modal-title">错误样式模态框</h4>
				</div>
				<div class="modal-body">
				  <p>主体内容</p>
				</div>
				<div class="modal-footer">
				  <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">关闭</button>
				  <button type="button" class="btn btn-outline">确认</button>
				</div>
			</div>
        </div>
	</div>
	
	<div class="row" style="margin-top: 10px;">
	  <div class="col-md-12">
	    <div class="box box-primary">
			<div class="box-header">
				<h3 class="box-title"> toastr提示信息</h3>
			</div>
			<div class="box-body">
				<div class="lead">
					<button type="button" class="btn btn-success toastrDefaultSuccess">
						成功提示框
					</button>
					<button type="button" class="btn btn-info toastrDefaultInfo">
						信息提示框
					</button>
					<button type="button" class="btn btn-danger toastrDefaultError">
						错误提示框
					</button>
					<button type="button" class="btn btn-warning toastrDefaultWarning">
						警告提示框
					</button>
					<button type="button" class="btn btn-success toastrDefaultSuccessOptions">
						提示框设置项
					</button>
					<button type="button" class="btn btn-default removeToastr">
						清除提示框
					</button>
				</div>
				<pre style="font-weight: 600;">
&lt;!-- 1. 引入文件 -->
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" />
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

&lt;!-- 2. 使用 -->
&lt;script>
	toastr.success('你好，success toastr');

	toastr.info('你好，info toastr');

	toastr.error('你好，error toastr');
	
	toastr.warning('你好，warning toastr');

	toastr.success('你好，小标题', '大标题', {timeOut: 1000});

	toastr.remove();

	toastr.clear();
&lt;/script>
				</pre>
			</div>
			<div class="box-footer">
				访问 <a href="https://codeseven.github.io/toastr" target="_blank">toastr文档</a> 获取更多信息和样例.
			</div>
	    </div>
	  </div>
	</div>
	
  </section>
  <div class="control-sidebar-bg"></div>
</div>

<script src="../../plugin/jquery/jquery.min.js"></script>
<script src="../../plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugin/fastclick/fastclick.js"></script>
<script src="../../adminlte/js/adminlte.min.js"></script>
<script src="../../plugin/toastr/toastr.min.js"></script>

<script>
    $(".toastrDefaultSuccess").click(function(){
      toastr.success('你好，success toastr');
    })
    $(".toastrDefaultInfo").click(function(){
      toastr.info('你好，info toastr');
    })
    $(".toastrDefaultError").click(function(){
      toastr.error('你好，error toastr');
    })
    $(".toastrDefaultWarning").click(function(){
      toastr.warning('你好，warning toastr');
    })
    $(".toastrDefaultSuccessOptions").click(function(){
      toastr.success('你好，小标题', '大标题', {timeOut: 1000});
    })
    $(".removeToastr").click(function(){
        toastr.remove()
    })
</script>
</body>
</html>
